<template>
  <div>
    <el-row class="title" :gutter="40">
      <el-col :span="6"><span class="bold">数据分析</span></el-col>
      <el-col :span="5"></el-col>
      <el-col :span="7">
        <label for=""></label>
        <div class="block">
          <span class="demonstration">统计日期</span>
          <el-date-picker
            v-model="value1"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          >
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <el-row>
          <el-col :span="5" :offset="1">
            <span>今天</span>
          </el-col>
          <el-col :span="5" :offset="1">
            <span>明天</span>
          </el-col>
          <el-col :span="5" :offset="1">
            <span>最近7天</span>
          </el-col>
          <el-col :span="5" :offset="1">
            <span>最近30天</span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="40" class="top">
      <el-col :span="6">
        <el-card>
          <div>
            <p>支付金额(元)</p>
            <p class="size">12650</p>
            <p>较上期<i class="el-icon-caret-top"></i>12%</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6"
        ><el-card>
          <div>
            <p>支付金额(元)</p>
            <p class="size">12650</p>
            <p>较上期<i class="el-icon-caret-top"></i>12%</p>
          </div></el-card
        ></el-col
      >
      <el-col :span="6"
        ><el-card>
          <div>
            <p>支付金额(元)</p>
            <p class="size">12650</p>
            <p>较上期<i class="el-icon-caret-top"></i>12%</p>
          </div></el-card
        ></el-col
      >
      <el-col :span="6"
        ><el-card>
          <div>
            <p>支付金额(元)</p>
            <p class="size">12650</p>
            <p>较上期<i class="el-icon-caret-top"></i>12%</p>
          </div></el-card
        ></el-col
      >
    </el-row>
    <el-row :gutter="40" class="middle">
      <el-col :span="12"
        ><el-card> <div id="payment-chart"></div> </el-card
      ></el-col>
      <el-col :span="12"
        ><el-card> <div id="order-chart"></div> </el-card
      ></el-col>
    </el-row>
    <el-row :gutter="40" class="center">
      <el-col
        ><el-card> <div id="people-chart"></div> </el-card
      ></el-col>
    </el-row>
    <el-row :gutter="40" class="foot">
      <el-col :span="12"
        ><el-card> <div id="amount-chart"></div> </el-card
      ></el-col>
      <el-col :span="12"
        ><el-card> <div id="customers-chart"></div> </el-card
      ></el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data: function () {
    let _minTime = null;
    let _maxTime = null;
    return {
      value1: "",
    };
  },
  mounted() {
    this.createPayment();
    this.createOrder();
    this.createPeople();
    this.createAmount();
    this.createCustomers();
  },
  methods: {
    createPayment() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("payment-chart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "支付金额",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
          {
            data: [20, 1032, 801, 1034, 190, 1430, 1520],
            type: "line",
            smooth: true,
          },
        ],
      });
    },
    createOrder() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("order-chart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "支付订单数",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
          {
            data: [20, 1032, 801, 1034, 190, 1430, 1520],
            type: "line",
            smooth: true,
          },
        ],
      });
    },
    createPeople() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("people-chart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "支付人数统计（小时）",
        },
        xAxis: {
          type: "category",
          data: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [
              120, 200, 150, 80, 70, 110, 130, 70, 70, 70, 70, 70, 70, 70, 70,
              70, 70, 70, 70, 70, 70, 70, 70, 70, 70,
            ],
            type: "bar",
          },
        ],
      });
    },
    createAmount() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("amount-chart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "成交金额占比",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "老顾客" },
              { value: 735, name: "新顾客" },
            ],
          },
        ],
      });
    },
    createCustomers() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("customers-chart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "成交客户数占比",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "10",
          right: "10",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "老顾客" },
              { value: 735, name: "新顾客" },
            ],
          },
        ],
      });
    },
  },
};
</script>
<style scoped lang="less">
.el-card {
  border-radius: 8px;
}

.title {
  margin-bottom: 10px;
  height: 60px;
  .el-col {
    height: 60px;
    line-height: 60px;
    .bold {
      font-size: 24px;
      font-weight: bold;
    }
    .demonstration {
      margin-right: 20px;
      margin-left: 12px;
    }
  }
}
.top {
  margin-bottom: 40px;
  .el-card {
    height: 160px;
  }
  > .el-col {
    height: 146px;
    p {
      margin-bottom: 10px;
    }
  }
  .size {
    font-size: 36px;
    font-weight: bold;
  }
}
.middle {
  margin-bottom: 20px;
  .el-card {
    height: 454px;
    #payment-chart,
    #order-chart {
      height: 414px;
    }
  }
}
.center {
  margin-bottom: 20px;
  .el-card {
    height: 454px;
    #people-chart {
      height: 414px;
    }
  }
}
.foot {
  margin-bottom: 20px;
  .el-card {
    height: 382px;
    #amount-chart,
    #customers-chart {
      height: 342px;
    }
  }
}
</style>
